{% extends "static/view/template.html" %}
{% block body %}

<style>

.modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}
.glyphicon:hover {
    background-color: #ffff00;
    cursor: pointer;
}

table {
  width: 80%;
  table-layout: fixed;
  border-radius: 3px;
  background-color: #fff;
}

.table.table-striped.main {
  border: 2px solid #005A31;
}

.table.table-striped.main th {
  background-color: #005A31;
  color:  #fff;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -user-select: none;
}

td {
  background-color: #f9f9f9;
  word-wrap:break-word;
}

th, td {
  min-width: 120px;
  padding: 10px 20px;
}

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
    background: #f44c0e;
}

/* CSS REQUIRED */
.state-icon {
    left: -5px;
}
.list-group-item-primary {
    color: rgb(255, 255, 255);
    background-color: rgb(0, 128, 128);
}

.list-group-item:hover {
    cursor: pointer;
}

/* DEMO ONLY - REMOVES UNWANTED MARGIN */
.well .list-group {
    margin-bottom: 0px;
}
</style>

<div id="app">
    <div class="container">

        <div class="page-header">
        </div>

        <div class="page-header">
            <h1> <font color= #333333><center>Service Store</center></font>
                <small><center><font color= #778899></font></center></small>
            </h1>
        </div>

    </div>
    <div class="container" style="margin-top:20px;">
        <div class="row">
            <table class="table table-striped main" id="packList">
            <thead>
            <tr>
                <th>&nbsp;</th>
                <th>Name</th>
                <th>Author</th>
                <th>Details</th>
                <th>Instances</th>
                <th>Deploy</th>
                <th>Down</th>
                <th>Delete</th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="pack in packList">
                    <td><img :src="pack.imgsrc" width="50" height="50" ></td> 
                    <td>{{pack.name}}</td>                     
                    <td>{{pack.author}}</td> 
                    <td><span class="glyphicon glyphicon-list-alt" aria-hidden="true" @click="showDetail(pack)"></span></td>
                    <!--<td><a href="local/pack/{{pack.name}}/{{pack.name}}.Tron.Composition.dll" download><span class="glyphicon glyphicon-save-file" aria-hidden="true"></span></a></td>-->
                    <td><span class="glyphicon glyphicon-flash" aria-hidden="true" @click="gotoInstance(pack.name)"></span></td>
                    <td><span class="glyphicon glyphicon-send" aria-hidden="true" @click="predeploy(pack)"></span></td>
                    <td><span class="glyphicon glyphicon-file" aria-hidden="true" @click="gotoFile(pack)"></span></td>
                    <td><span class="glyphicon glyphicon-remove" aria-hidden="true" @click="remove(pack.name)"></span></td>
                </tr>
            </tbody>
            </table>
        </div>
        <div class="row">
            <div class="col-xs-10"></div>
            <div class="col-xs-2">
                <button class="btn btn-success" data-toggle="modal" data-target="#uploadpack1">Service Registration </button>
            </div>
        </div>
    </div>

    <!-- Upload Package Modal -->
    <div id="uploadpack1" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Service Registration -- Step 1</h4>
          </div>
          <div class="modal-header">
            <div class="row">
                <div class="col-xs-12">
Service packages are registered as <i>%name%.tar.gz</i> (Linux, or <i>%name%.zip</i> on Windows), with <i>%name%</i> as the top directory name in the tar ball, and <i>%name%/config.deploy.ini</i>. rDSN starts the packages as <i>dsn.svchost config.deploy.ini -cargs port=%port%;k1=v1;k2=v2;...;</i> where <i>port</i> is the assigned network listen port and <i>k1,v1,...</i> are environment variables defined at deployment time. 
                <h4 class="modal-title" />
                </div>
            </div>
          </div>
          <div class="modal-body">            
            <div class="row">
                <div class="col-xs-4">
                    <label for="packname">Name</label>
                    <input id="packname" disabled="disabled">
                </div>
                <div class="col-xs-4">
                    <label for="author" >Author</label>
                    <input id="author">
                </div>
                <div class="col-xs-4">
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <label for="description" >Descrption</label>
                    <textarea class="form-control" rows="2" id="description"></textarea>                    
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <form name="fileForm" method="post" onsubmit="return validateForm()" enctype="multipart/form-data">
                    <div class="row">
                        <div class="col-xs-12">
                            <input id="iconpath" placeholder="Choose File" disabled="disabled" />
                            <div class="fileUpload btn btn-info"><span>Select Icon</span><input type="file" name="iconToUpload" id="iconToUpload" class="upload" accept=".jpg"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <input id="filepath" placeholder="Choose File" disabled="disabled" />
                            <div class="fileUpload btn btn-warning"><span>Select Package</span><input type="file" name="fileToUpload" id="fileToUpload" class="upload" accept=".zip;.tar.gz"></div>
                            <h4 v-if="ifNameDuplicated"><font color="red">Package name duplicated!</font></h4>
                        </div>
                    </div>
                    <input id="is_stateful" name="is_stateful" type="hidden" value="false">
                    <input id="source" name="source" type="hidden" value=""></input>
                    <input id="file_name" name="file_name" type="hidden" value=""></input>
                    <input id="author" name="author" type="hidden" value=""></input>
                    <input id="description" name="description" type="hidden" value=""></input>
                    <input id="schema_info" name="schema_info" type="hidden" value=""></input>
                    <input id="rpc_type" name="rpc_type" type="hidden" value=""></input>
                    <input id="schema_type" name="schema_type" type="hidden" value=""></input>
                    <input id="parameters" name="parameters" type="hidden" value=""></input>
                    <input id="is_stateful" name="is_stateful" type="hidden" value=""></input>
                    <input id="icon_path" name="icon_path" type="hidden" value=""></input>
                    <input id="file_path" name="file_path" type="hidden" value=""></input>
                    </form>
                </div>
            </div>
          </div>
          <div class="modal-footer">
            <div class = "pull-left">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
            <div class = "pull-right">
                <button type="button" class="btn btn-info" data-toggle="modal" data-dismiss="modal" data-target="#uploadpack2" v-if="ifNameDuplicated == false">Next</button>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div id="uploadpack2" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Service Registration -- Step 2</h4>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-xs-12">
                <label for="rpc_type_in" >RPC access type</label>
                <select class = "form-control" id = "rpc_type_in">
                  <option value = "rdsn">rdsn</option>
                  <option value = "thrift">thrift</option>
                  <option value = "bond">bond</option>
                  <option value = "protobuf">protocol buffer</option>
                </select>
              </div>
            </div>
            
            <div class="row">
              <div class="col-xs-12">
                <label for="schema_type_in" >Service Schema</label>
                <select class = "form-control" id = "schema_type_in">
                  <option value = "thrift">thrift</option>
                  <option value = "bond">bond</option>
                  <option value = "protobuf">protocol buffers</option>
                </select>
              </div>
            </div>
            
            <div class = "row">
              <div class="col-xs-12">
                <label for="schema_info_in" > </label>
                <textarea class="form-control" rows="10" id="schema_info_in">
namespace cpp dsn.example

struct count_op
{
   1: string name;
   2: i32    operand;
}

service counter
{
    i32 add(1:count_op op);
    i32 read(1:string name);
}                   
                </textarea>
              </div>
            </div>
            
            
          </div>
          <div class="modal-footer">
            <div class = "pull-left">
              <button type="button" class="btn btn-info" data-dismiss="modal" data-toggle="modal" data-target="#uploadpack1">Previous</button>
            </div>
            <div class = "pull-right">
              <button type="button" class="btn btn-info" data-toggle="modal" data-dismiss="modal" data-target="#uploadpack3">Next</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="uploadpack3" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Service Registration -- Step 3</h4>
          </div>
          <div class="modal-body">
            <div class = "row">
              <div class = "col-xs-9">
                <label>Environment variables</label>
              </div>
              <div class = "col-xs-3">
                <button type = "button" class = "btn btn-warning" @click="addKV">Add Variable</button>
              </div>
            </div>
            <div class = "row">
              <div class = "col-xs-12">
                <table class = "table table-striped">
                  <thead>
                    <tr>
                      <th>Key</th>
                      <th>Default Value</th>
                      <th>Remove</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                        <input style="width: 100%;"
                            autofocus autocomplete="off"
                            v-model="newKey">
                      </td>
                      <td>
                        <input style="width: 100%;"
                            autofocus autocomplete="off"
                            v-model="newValue">
                      </td>
                      <td>
                      </td>
                    </tr>
                    <tr v-for="(index, kv) in paramList">
                        <td>{{kv.key}}</td>
                        <td>{{kv.value}}</td>
                        <td>
                            <span class="glyphicon glyphicon-remove" aria-hidden="true" @click="removeKV(kv)"></span>
                        </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <div class = "pull-left">
              <button type="button" class="btn btn-info" data-dismiss="modal" data-toggle="modal" data-target="#uploadpack2">Previous</button>
            </div>
            <div class = "pull-right">
              <button type="button" class="btn btn-success" data-dismiss="modal" onclick="$('form[name=\'fileForm\']').submit();">Submit</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Detail Modal-->
    <div id = "detail_modal" class = "modal fade" role = "dialog">
      <div class = "modal-dialog">
        <!-- modal content -->
        <div class = "modal-content">
          <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal">&times;</button>
            <h4 class = "modal-title text-danger">Detail for {{detail_pack.name}}</h4>
          </div>
          <div class = "modal-body">
            <div class = "row">
              <div class = "col-xs-6">
                <label>RPC Access Type : </label>
                <p>{{detail_pack.rpc_type}}</p>
              </div>
            </div>
            <div class = "row">
              <div class = "col-xs-6">
                <label>Schema Type : </label>
                <p>{{detail_pack.schema_type}}</p>
              </div>
            </div>
            <div class = "row">
              <div class = "col-xs-12">
                <label>Schema Detail : </label>
                <pre>{{detail_pack.schema_info}}</pre>
              </div>
            </div>
            <div class = "row">
              <div class = "col-xs-12">
                <label for="detail_parameters"> Common envrionment variables : </label>
                <table class = "table table-striped text-success">
                  <thead>
                    <tr>
                      <th><span class = "text-muted">Key</span></th>
                      <th><span class = "text-muted">Value</span></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(key,value) in detail_pack.parameters">
                        <td>{{key}}</td>
                        <td>{{value}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>


    <!-- Deploy Modal -->
    <div id="deploypack" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">New deployment for {{deploy_pack.name}}</h4>
          </div>
          <div class="modal-body">
            <div class="row">
                <div class="col-xs-4">
                    <label for="app_name" >App Name</label>
                    <input id="app_name" v-model="app_name">
                </div>
                <div class="col-xs-4"></div>
                <div class="col-xs-4"></div>
            </div>
            <div class="row">
                <hr>
            </div>
            <div class="row">
                <div class="col-xs-4">
                    <label for="partition_count" >Partition #</label>
                    <input id="partition_count" v-model="partition_count" value=1>
                </div>
                <div class="col-xs-4">
                    <label for="replica_count" >Replica #</label>
                    <input id="replica_count" v-model="replica_count" value=3>
                </div>
                <div class="col-xs-4">
                    <label for="success_if_exist" >Success if exists</label>
                    <select class = "form-control" id = "success_if_exist" v-model="success_if_exist">
                      <option value = "true">true</option>
                      <option value = "false" selected>false</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <hr>
            </div>
            <div class = "row">
              <div class = "col-xs-12">
                <label for="detail_parameters"> Target deployment scenario : </label>
                <table class = "table table-striped text-success">                  
                  <tbody>
                    <tr>
                        <td colspan=2>
                        <select class = "form-control"  v-model="deploy_config_id"><!-- onchange="javascript:vm.on_deploy_config_changed()">-->
                            <option v-for="(key,value) in deploy_configs" value="{{key}}"> 
                            {{value.title}} 
                            </option>
                        </select>
                        <font color=gray>{{deploy_configs[deploy_config_id].dsptr}}</font>
                        </td>                        
                    </tr>
                    
                    <tr v-for="(key,value) in deploy_configs[deploy_config_id].overwrites">
                        <td>{{key}}</td>
                        <td><input value="{{value}}" id="deploy_overwrites_{{key}}"  class = "form-control"></td>
                    </tr>
                    
                    <tr>
                        <td colspan=2>
                        Addtional configurations (section.key=value;section2.key2=value2;...):                        
                        <textarea class = "form-control"  v-model="deploy_overwrites_extra" rows=2>
                        </textarea>
                        </td>                        
                    </tr>
                    
                  </tbody>
                </table>
              </div>
            </div>
            
            <div class = "row">
              <div class = "col-xs-12">
                <label for="detail_parameters"> Common envrionment variables : </label>
                <table class = "table table-striped text-success">
                  <thead>
                    <tr>
                      <th><span class = "text-muted">Key</span></th>
                      <th><span class = "text-muted">Value</span></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(key,value) in deploy_parameters">
                        <td>{{key}}</td>
                        <td><input value="{{value}}" id="deploy_parameters_{{key}}"></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="row">
                <hr>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-success" data-dismiss="modal" @click="deploy()">Deploy</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>

      </div>
    </div>
</div>

<script src="js/vue.js"></script>
<script src="js/rdsn.envs.js"></script>
<script src="js/store.js"></script>

{% endblock %}
